<template>
  <div class="edit-airline-panel" :class="{ collapsed: isCollapsed }">
    <!-- 标题 -->
    <div class="panel-header">
      <h3 class="panel-title">设备列表</h3>

      <!-- Tab切换 -->
      <div class="tab-container">
        <div 
          class="tab-item" 
          :class="{ active: activeTab === 1 }"
          @click="switchTab(1)"
        >
          自动任务
        </div>
        <div 
          class="tab-item" 
          :class="{ active: activeTab === 2 }"
          @click="switchTab(2)"
        >
          手动任务
        </div>
      </div>
    </div>
    
    <!-- 内容 -->
    <div class="panel-content">
      <!-- 设备列表表格 -->
      <el-table
        :data="tableData"
        style="width: 100%; background: transparent !important;"
        class="transparent-table common-table"
        v-loading="loading"
        :header-cell-style="{ 
          background: 'transparent !important', 
          backgroundColor: 'transparent !important',
          border: 'none !important',
          color: 'rgba(255, 255, 255, 0.9) !important'
        }"
        :cell-style="{ 
          background: 'transparent !important', 
          backgroundColor: 'transparent !important',
          border: 'none !important',
          color: 'rgba(255, 255, 255, 0.9) !important'
        }"
        @row-click="handleSee"
      >
        <el-table-column
          prop="drone_name"
          label="飞行器名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="drone_sn"
          label="飞行器序列号"
          width="280">
        </el-table-column>
        <el-table-column
          prop="last_upload_time"
          label="最新上传时间"
          width="auto"
        >
          <template #default="scope">
            {{ formatToTimestamp(scope.row.last_upload_time) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="pic_num"
          label="图片数量"
          width="100">
        </el-table-column>
        <el-table-column
          prop="video_num"
          label="视频数量"
          width="100">
        </el-table-column>
        <!-- <el-table-column
          label="操作"
          width="120"
          align="center"
          header-align="center">
          <template #default="scope">
            <div class="action-buttons">
              <img 
                src="@/assets/images/datamanage_device_download.png" 
                alt="下载" 
                class="action-btn download-btn"
                @click="handleDownload(scope.row)"
                title="下载"
              />
              <img 
                src="@/assets/images/datamanage_device_delete.png" 
                alt="删除" 
                class="action-btn delete-btn"
                @click="handleDelete(scope.row)"
                title="删除"
              />
            </div>
          </template>
        </el-table-column> -->
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="Math.max(total, 0)"
          layout="prev, pager, next"
          :hide-on-single-page="false"
          @current-change="handlePageChange"
        />
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'
import { useUserStore } from '@/stores/modules/user'



// 响应式数据
const activeTab = ref(2) // 当前激活的tab，默认为航线照片
const userStore = useUserStore()
const tableData = ref([])
const loading = ref(false)
const selectedFileId = ref(null) // 当前选中的文件ID
const selectedFile = ref(null) // 当前选中的文件对象

// 分页相关数据
const currentPage = ref(1) // 当前页码
const pageSize = ref(10) // 每页显示数量
const total = ref(0) // 总数量

// 切换tab
const switchTab = (tabValue) => {
  if (activeTab.value === tabValue) return
  
  activeTab.value = tabValue
  console.log('切换到tab:', tabValue === 1 ? '自动任务' : '手动任务')
  
  // 切换tab时清空选择并重置分页
  selectedFileId.value = null
  selectedFile.value = null
  currentPage.value = 1
  
  // 重新获取数据
  fetchDeviceList()
}

// 获取设备列表
const fetchDeviceList = async () => {
  try {
    loading.value = true
    // 从用户store获取workspace_id
    const workspaceId = userStore.user?.workspaceId
    
    if (!workspaceId) {
      ElMessage.error('未获取到工作空间ID，请重新登录')
      return
    }
    
    console.log('获取设备列表:', { workspaceId, activeTab: activeTab.value, page: currentPage.value, pageSize: pageSize.value })
    
    const response = await request({
      url: `/manage/api/v1/devices/${workspaceId}/drones`,
      method: 'get',
      params: {
        page: currentPage.value,
        pageSize: pageSize.value,
        taskType: activeTab.value // 1: 自动任务, 2: 手动任务
      }
    })
    
    console.log('API响应数据:', response)
    
    // 处理不同的响应数据结构
    let data = []
    if (response) {
      if (Array.isArray(response)) {
        data = response
        // 如果是直接的数组，假设总数等于数组长度（无分页）
        total.value = data.length
      } else if (response.data && Array.isArray(response.data)) {
        data = response.data
        // 尝试获取分页信息
        if (response.pagination) {
          total.value = response.pagination.total || data.length
          currentPage.value = response.pagination.page || 1
          pageSize.value = response.pagination.page_size || 10
        } else {
          total.value = data.length
        }
      } else if (response.list && Array.isArray(response.list)) {
        data = response.list
        // 尝试获取分页信息
        if (response.pagination) {
          total.value = response.pagination.total || data.length
          currentPage.value = response.pagination.page || 1
          pageSize.value = response.pagination.page_size || 10
        } else {
          total.value = data.length
        }
      } else if (response.items && Array.isArray(response.items)) {
        data = response.items
        // 尝试获取分页信息
        if (response.pagination) {
          total.value = response.pagination.total || data.length
          currentPage.value = response.pagination.page || 1
          pageSize.value = response.pagination.page_size || 10
        } else {
          total.value = data.length
        }
      } else {
        console.warn('未找到预期的数据数组结构:', response)
        data = []
        total.value = 0
      }
    }
    
    tableData.value = data
    
    console.log('分页信息:', { 
      total: total.value, 
      currentPage: currentPage.value, 
      pageSize: pageSize.value,
      dataLength: data.length 
    })
    
    // 如果没有数据，添加一些测试数据用于显示
    if (tableData.value.length === 0) {
      console.log('API返回空数据，使用测试数据')
      tableData.value = [
        
      ]
    }
    
    console.log('最终表格数据:', tableData.value)
  } catch (error) {
    console.error('获取设备列表失败:', error)
    ElMessage.error('获取设备列表失败')
    tableData.value = []
  } finally {
    loading.value = false
  }
}


// 格式化时间
const formatTime = (timeStr) => {
  if (!timeStr) return '-'
  
  try {
    const date = new Date(timeStr)
    if (isNaN(date.getTime())) return timeStr
    
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')
    
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  } catch (error) {
    console.error('时间格式化错误:', error)
    return timeStr
  }
}

// 将时间戳转换为可读时间格式
const formatToTimestamp = (timeStr) => {
  if (!timeStr) return '-'
  
  try {
    // 如果输入的是时间戳（纯数字），则转换为可读格式
    const timestamp = parseInt(timeStr)
    if (!isNaN(timestamp) && timestamp > 0) {
      const date = new Date(timestamp)
      if (isNaN(date.getTime())) return timeStr
      
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')
      
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    }
    
    // 如果不是时间戳，尝试作为普通时间字符串处理
    const date = new Date(timeStr)
    if (isNaN(date.getTime())) return timeStr
    
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')
    
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  } catch (error) {
    console.error('时间格式化错误:', error)
    return timeStr
  }
}

// 编辑设备
const handleEdit = (row) => {
  console.log('编辑设备:', row)
  ElMessage.info('编辑功能待实现')
}

// 下载设备数据
const handleDownload = async (row) => {
  try {
    // 从用户store获取workspace_id
    const workspaceId = userStore.user?.workspaceId
    
    if (!workspaceId) {
      ElMessage.error('未获取到工作空间ID，请重新登录')
      return
    }
    
    ElMessage.info('正在准备下载...')
    
    // 调用下载API
    const response = await request({
      url: `/media/api/v1/files/${workspaceId}/files/download`,
      method: 'post',
      data: {
        drone_sn: row.drone_sn,
        drone_name: row.drone_name,
        fileIds: row.fileIds || []
      },
      responseType: 'blob' // 用于处理文件下载
    })
    
    // 创建下载链接
    if (response) {
      const blob = new Blob([response], { type: 'application/zip' })
      const url = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = `${row.drone_name}_${row.drone_sn}_媒体文件.zip`
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      window.URL.revokeObjectURL(url)
      
      ElMessage.success('下载成功')
    } else {
      ElMessage.error('下载失败：未获取到文件数据')
    }
  } catch (error) {
    console.error('下载设备数据失败:', error)
    ElMessage.error('下载设备数据失败')
  }
}

// 删除设备
const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除设备 "${row.drone_name}" 吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    // 从用户store获取workspace_id
    const workspaceId = userStore.user?.workspaceId
    
    if (!workspaceId) {
      ElMessage.error('未获取到工作空间ID，请重新登录')
      return
    }
    
    // 调用删除API
    const response = await request({
      url: `/media/api/v1/files/${workspaceId}/remove`,
      method: 'delete',
      data: {
        drone_sn: row.drone_sn,
        drone_name: row.drone_name,
        fileIds: row.fileIds || []
      }
    })
    
    console.log('删除API响应:', response)
    ElMessage.success('删除成功')
    
    // 重新获取列表
    await fetchDeviceList()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除设备失败:', error)
      ElMessage.error('删除设备失败')
    }
  }
}

// 查看设备媒体文件
const handleSee = (row) => {
  console.log('查看设备媒体文件:', row)
  console.log('设备完整数据:', JSON.stringify(row, null, 2))

  // 确保必要字段存在
  const deviceData = {
    ...row,
  }
  
  console.log('处理后的设备数据:', deviceData)
  
  // 发送设备选择事件给MediaFile组件
  const customEvent = new CustomEvent('device-selected-for-media', {
    detail: { 
      device: deviceData
    }
  })
  window.dispatchEvent(customEvent)
  console.log('发送设备选择事件给MediaFile组件:', deviceData)
  
  ElMessage.success(`正在加载设备 "${row.drone_name}" 的媒体文件`)
}

// 处理分页当前页变化
const handlePageChange = (val) => {
  currentPage.value = val
  fetchDeviceList()
}


// 组件挂载时获取数据
onMounted(() => {
  fetchDeviceList()
})
</script>

<style lang="scss" scoped>
// 样式已在主布局中导入，此处移除避免重复
@import '@/style/utils.scss';

.edit-airline-panel {
  position: relative;
  width: 1000px;
  height: 903px;
  background: url('@/assets/images/edit_airline_bg.png') no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  transition: transform 0.3s ease, width 0.3s ease;
  
  // 折叠状态
  &.collapsed {
    transform: translateX(-541px); // 只露出收起按钮部分
    
    .panel-header,
    .panel-content {
      opacity: 0;
      pointer-events: none;
    }
  }
  
  .panel-header {
    width: 100%;
    height: 38px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
    padding: 0 16px;
    box-sizing: border-box;
    transition: opacity 0.3s ease;
    
    .panel-title {
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 2px;
      line-height: 18px;
      background: linear-gradient(180deg, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 40%, rgba(59, 135, 202, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.5));
    }

    // Tab容器样式，完全仿照MediaFile.vue
    .tab-container {
      display: flex;
      border-bottom: 1px solid rgba(90, 120, 140, 1);
      
      .tab-item {
        width: 80px;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.6);
        cursor: pointer;
        border-radius: 4px;
        
        &:hover {
          color: rgba(0, 255, 244, 1);
        }
        
        &.active {
          color: rgba(0, 255, 244, 1);
          background: url('@/assets/images/tab_item_active.png') no-repeat;
          background-size: 100% 1px;
          background-position: center bottom;
          transition: none !important;
        }
      }
    }

  }
  
  .panel-content {
    flex: 1;
    width: 100%;
    max-height: 865px;
    overflow-y: auto;
    padding: 30px 16px;
    transition: opacity 0.3s ease;
    
    // 滚动条样式
    &::-webkit-scrollbar {
      width: 5px;
    }
    
    &::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 2.5px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 2.5px;
      transition: all 0.3s;
      
      &:hover {
        background: rgba(255, 255, 255, 0.5);
      }
    }
    
    // Firefox 滚动条样式
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
  }

  // 收起按钮
  .fold-btn {
    position: absolute;
    top: 50%;
    right: -26px;
    z-index: 2;
    transform: translateY(-50%);
    width: 26px;
    height: 81px;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      .fold-btn-to-left-icon {
        transform: translate(-50%, -50%) scale(1.2);
        
        &.rotated {
          transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
        }
      }
    }
    .fold-btn-bg {
      width: 100%;
      height: 100%;
    }
    .fold-btn-to-left-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 2;
      transform: translate(-50%, -50%);
      width: 14px;
      height: 14px;
      transition: transform 0.3s ease;
      
      // 折叠状态时旋转180度
      &.rotated {
        transform: translate(-50%, -50%) rotate(180deg);
      }
    }
  }
}

/* 无边框且完全透明的表格样式 */
.transparent-table {

  ::v-deep {
    /* 完全重置所有CSS变量并设置透明度 */
    .el-table {
      --el-table-border-color: transparent !important;
      --el-table-border: none !important;
      --el-table-text-color: inherit !important;
      --el-table-header-text-color: inherit !important;
      --el-table-row-hover-bg-color: transparent !important;
      --el-table-current-row-bg-color: transparent !important;
      --el-table-header-bg-color: transparent !important;
      --el-table-tr-bg-color: transparent !important;
      --el-table-fixed-box-shadow: none !important;
      --el-table-bg-color: transparent !important;

      --el-table-expanded-cell-bg-color: transparent !important;
      --el-table-fixed-left-column: none !important;
      --el-table-fixed-right-column: none !important;
      background-color: transparent !important;
      background: transparent !important;
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      opacity: 1 !important;
    }

    /* 超级强力的表头透明度覆盖 */
    .el-table th,
    .el-table thead th,
    .el-table__header th,
    .el-table__header .el-table__cell,
    .el-table__header-wrapper .el-table__cell,
    .el-table .el-table__header .el-table__cell,
    .el-table thead .el-table__cell {
      background-color: transparent !important;
      background: transparent !important;
      background-image: none !important;
      border: none !important;
      box-shadow: none !important;
    }

    /* 1. 移除表格所有边框 */
    .el-table,
    .el-table__header-wrapper,
    .el-table__body-wrapper,
    .el-table__cell,
    .el-table__row,
    .el-table--border,
    .el-table--border th,
    .el-table--border td,
    .el-table__empty-block,
    .el-table__body,
    .el-table__header,
    .el-table__fixed-header-wrapper,
    .el-table__fixed-body-wrapper,
    .el-table__fixed,
    .el-table__fixed-right,
    .el-table__fixed-left,
    .el-table__fixed-right-patch,
    .el-table__fixed-header-wrapper,
    .el-table__fixed-body-wrapper,
    .el-table__fixed-footer-wrapper {
      border: none !important;
      border-right: none !important;
      border-bottom: none !important;
      border-left: none !important;
      border-top: none !important;
      border-collapse: separate !important;
      background-color: transparent !important;
      outline: none !important;
      box-shadow: none !important;
    }

    /* 2. 移除表格默认背景色并确保透明 */
    .el-table,
    .el-table th,
    .el-table td,
    .el-table__body,
    .el-table__header {
      background-color: transparent !important;
      background: transparent !important;
      opacity: 1 !important;
    }

    /* 3. 表头样式定制 - 完全透明背景 */
    .el-table__header {
      background: transparent !important;
      
      .el-table__cell {
        background-color: transparent !important;
        background: transparent !important;
        color: rgba(255, 255, 255, 0.9) !important;
        border: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-left: none !important;
        border-top: none !important;
      }
    }

    /* 强制覆盖表头样式 - 使用更高权重选择器 */
    .el-table__header-wrapper .el-table__header .el-table__cell,
    .el-table thead .el-table__cell,
    .el-table .el-table__header-wrapper .el-table__cell,
    .el-table th.el-table__cell {
      background-color: transparent !important;
      background: transparent !important;
      border: none !important;
    }

    /* 4. 表格行样式定制 - 增强透明度 */
    .el-table__body {
      background: transparent !important;
      
      tr {
        
        td {
          background-color: transparent !important;
          color: rgba(255, 255, 255, 0.9) !important;
          border: none !important;
          border-right: none !important;
          border-bottom: none !important;
          border-left: none !important;
          border-top: none !important;
        }

        &:nth-child(even) {
          background-color: rgba(5, 173, 187, 0.08) !important;
        }

        &:hover {
          background-color: rgba(10, 60, 72, 0.3) !important;
        }
      }
    }

    /* 5. 移除默认的内边距影响 */
    .el-table__cell {
      padding: 6px 0 !important;
      border: none !important;
      border-right: none !important;
      border-bottom: none !important;
      border-left: none !important;
      border-top: none !important;
    }

    /* 终极表头透明度覆盖 - 最高权重 */
    .transparent-table .el-table__header .el-table__cell,
    .transparent-table .el-table thead .el-table__cell,
    .transparent-table th,
    .transparent-table thead th,
    .transparent-table .el-table__header-wrapper th,
    .transparent-table .el-table__header-wrapper .el-table__cell {
      background-color: transparent !important;
      background: transparent !important;
      background-image: none !important;
      border: none !important;
      box-shadow: none !important;
    }

    /* 6. 移除表格外层的所有边框和轮廓 */
    .el-table::before,
    .el-table::after {
      display: none !important;
    }

    /* 7. 确保表格容器也没有边框 */
    .el-table__body-wrapper,
    .el-table__header-wrapper {
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
    }

    /* 8. 移除所有可能的边框线 */
    .el-table__border-line {
      display: none !important;
    }

    /* 9. 移除表格的默认边框样式 */
    .el-table--border::after,
    .el-table--border::before {
      display: none !important;
    }

    /* 10. 确保所有表格元素都没有边框 */
    .el-table * {
      border: none !important;
      border-right: none !important;
      border-bottom: none !important;
      border-left: none !important;
      border-top: none !important;
    }

    /* 11. 移除表格的默认边框类 */
    .el-table--border {
      border: none !important;
    }

    /* 12. 确保表格行和单元格完全没有边框 */
    .el-table__row,
    .el-table__cell,
    .el-table__header .el-table__cell,
    .el-table__body .el-table__cell {
      border: none !important;
      border-right: none !important;
      border-bottom: none !important;
      border-left: none !important;
      border-top: none !important;
    }

    /* 13. 强制表头完全透明 - 最高优先级 */
    .transparent-table thead,
    .transparent-table .el-table__header,
    .transparent-table .el-table__header-wrapper,
    .transparent-table .el-table__header-wrapper .el-table__header,
    .transparent-table .el-table__header-wrapper .el-table__header .el-table__cell,
    .transparent-table thead tr,
    .transparent-table thead tr th,
    .transparent-table thead tr th.el-table__cell {
      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;
      opacity: 1 !important;
    }

    /* 14. 强制所有表格行透明 - 覆盖任何默认样式 */
    .transparent-table .el-table tr,
    .transparent-table .el-table__row,
    .transparent-table .el-table tbody tr,
    .transparent-table .el-table__body tr {
      background: rgba(5, 140, 187, 0.3) !important;
      background-color: rgba(5, 140, 187, 0.3) !important;
      cursor: pointer !important;
    }

    /* 15. 移除按钮的白色边框 */
    .el-button {
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
    }

    /* 14. 移除加载状态的白色边框 */
    .el-loading-mask {
      border: none !important;
      outline: none !important;
    }

    /* 15. 移除表格容器的所有边框 */
    .el-table__inner-wrapper {
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
    }
  }
}

/* 状态样式 */
.status-online {
  color: #67C23A !important;
  font-weight: 500;
}

.status-offline {
  color: #F56C6C !important;
  font-weight: 500;
}

.status-maintenance {
  color: #E6A23C !important;
  font-weight: 500;
}

.status-error {
  color: #F56C6C !important;
  font-weight: 500;
}

.status-unknown {
  color: #909399 !important;
  font-weight: 500;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.action-btn {
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  object-fit: contain;
  
  &:hover {
    transform: scale(1.2);
    filter: brightness(1.2);
  }
  
  &:active {
    transform: scale(0.95);
  }
}

.download-btn:hover {
  filter: brightness(1.2) saturate(1.2);
}

.delete-btn:hover {
  filter: brightness(1.2) saturate(1.2);
}

/* 分页样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 16px 0;
  flex-shrink: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 60px; // 确保有最小高度
  
  :deep(.el-pagination) {
    --el-pagination-font-size: 12px;
    --el-pagination-bg-color: transparent;
    --el-pagination-text-color: rgba(255, 255, 255, 0.8);
    --el-pagination-border-radius: 4px;
    --el-pagination-button-color: rgba(255, 255, 255, 0.6);
    --el-pagination-button-bg-color: rgba(255, 255, 255, 0.1);
    --el-pagination-button-disabled-color: rgba(255, 255, 255, 0.3);
    --el-pagination-button-disabled-bg-color: transparent;
    --el-pagination-hover-color: rgba(0, 255, 244, 1);
    --el-pagination-hover-bg-color: rgba(0, 255, 244, 0.2);
    
    .el-pager li {
      background: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.2);
      
      &:hover {
        background: rgba(0, 255, 244, 0.2);
        color: rgba(0, 255, 244, 1);
      }
      
      &.is-active {
        background: rgba(0, 255, 244, 0.8);
        color: #ffffff;
      }
    }
    
    .btn-prev,
    .btn-next {
      background: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.2);
      
      &:hover {
        background: rgba(0, 255, 244, 0.2);
        color: rgba(0, 255, 244, 1);
      }
    }
    
    .el-pagination__total,
    .el-pagination__jump {
      color: rgba(255, 255, 255, 0.8);
    }
    
    .el-select .el-input {
      --el-input-bg-color: rgba(255, 255, 255, 0.1);
      --el-input-border-color: rgba(255, 255, 255, 0.2);
      --el-input-text-color: rgba(255, 255, 255, 0.9);
    }
  }
}
</style>
